<!--  -->
<template>
  <div class="type_radio_select" style="display:flex;align-items:center;margin-top:10px">
    <!-- <el-radio-group v-model="dataForm[scriptItem.text][scriptItem.radioValue]"
                    @change="changeRadio"
                    class="radioCom">
      <el-radio v-for="item in scriptItem.radioList"
                :key="item.name"
                :label="item.value">{{item.name}}
      </el-radio>
    </el-radio-group> -->
    <el-select style="width:106px" @change="changeRadio" v-model="dataForm[scriptItem.text][scriptItem.radioValue]" :placeholder="$t('custom.component.columns.pleaseselect')">
      <el-option
        v-for="item in scriptItem.radioList"
        :key="item.value"
        :label="item.name"
        :value="item.value">
      </el-option>
    </el-select>

    <div style="margin-left:10px">
      <widgetDataGrounp v-if="changeValue === 'widget'"
        :defaultValue="dataForm[scriptItem.text][scriptItem.selectValue]"
        :options="selectData"
        :isBot='true'
        :placeholder="$t('statement.psaw')"
        @widgetSelecteChange="getWidgetChangeVal"
        @widgetChanged="widgetChanged"
        :showIcon="true"
        :type="changeValue"
        width="width: 350px">
      </widgetDataGrounp>
      <SelectDatasetGroup ref="SelectDatasetGroup"
        :isBot='true'
        v-show="changeValue === 'dataset'"
        :defaultValue="dataForm[scriptItem.text][scriptItem.selectValue]"
        :placeholder="$t('statement.psad')"
        @onSelectChange="onDatasetChange"
        width="width: 350px"
        :selectDatasetLayerId="selectDatasetLayerId"
        :type="changeValue"
      />
    </div>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'
import widgetDataGrounp from './widgetDataGrounp'
import store from '@/store'
export default {
  mixins: [mixinTypeViewModule],
  components: { widgetDataGrounp },
  data () {
    return {
      selectData: [],
      changeValue: '',
      dataSetList: [],
      widgetList: [],
      backSelectValue: '',
      selectDatasetLayerId: ''
    }
  },
  beforeCreate () {
    this.$options.components.SelectDatasetGroup = () => import('@/components/select-dataset-group')
  },
  watch: {
    selectData: {
      handler: function (val) {
        if (Array.isArray(val) && val.length > 0) {
          this.dataForm[this.scriptItem.text][this.scriptItem.selectValue] && this.$store.dispatch('triggerSelectDataName', this.getSelectDataName(this.dataForm[this.scriptItem.text][this.scriptItem.selectValue]))
        }
      },
      deep: true
    }
  },
  methods: {
    initThis () {
      this.selectData = []
      this.changeValue = this.dataForm[this.scriptItem.text][this.scriptItem.radioValue]
      this.selectDatasetLayerId = this.dataForm[this.scriptItem.text]['datasetLayerId']
      this.$store.dispatch('triggerSelectDataIType', this.dataForm[this.scriptItem.text][this.scriptItem.radioValue])
      this.$store.dispatch('triggerSelectDataId', this.dataForm[this.scriptItem.text][this.scriptItem.selectValue])
      this.$store.dispatch('triggerSelectDataName', this.getSelectDataName(this.dataForm[this.scriptItem.text][this.scriptItem.selectValue]))
      this.$forceUpdate()
      this.getKeyArrayList(this.dataForm[this.scriptItem.text][this.scriptItem.radioValue], this.dataForm[this.scriptItem.text][this.scriptItem.selectValue])
    },
    getWidgetChangeVal (val) {
      this.dataForm[this.scriptItem.text][this.scriptItem.selectValue] = val
      this.changeSelect(val)
    },
    changeRadio (value) {
      this.changeValue = value
      this.selectData = []
      this.dataForm[this.scriptItem.text][this.scriptItem.selectValue] = ''
      this.observer.issue('updateKeyArray', [])
      this.observer.issue('clearFilterData')
      this.$store.dispatch('triggerSelectDataIType', value)
      this.$store.dispatch('triggerSelectDataId', '')
      this.$store.dispatch('triggerSelectDataName', '')
    },
    onDatasetChange (val) {
      let datasetId
      if (!val) datasetId = ''
      else datasetId = val.id
      this.selectDatasetLayerId = val.datasetLayerId ? val.datasetLayerId : ''
      this.getKeyArrayList(this.changeValue, datasetId)
      this.observer.issue('clearFilterData')
      this.dataForm[this.scriptItem.text][this.scriptItem.selectValue] = datasetId
      this.dataForm[this.scriptItem.text]['datasetLayerId'] = val.datasetLayerId ? val.datasetLayerId : ''
      this.$store.dispatch('triggerSelectDataIType', this.changeValue)
      this.$store.dispatch('triggerSelectDataId', datasetId)
      this.$store.dispatch('triggerSelectDataName', this.getSelectDataName(datasetId))
    },
    changeSelect (val) {
      if (this.changeValue === 'widget') {
        this.getKeyArrayList(this.changeValue, val)
        this.observer.issue('clearFilterData')
      }
      this.$store.dispatch('triggerSelectDataIType', this.changeValue)
      this.$store.dispatch('triggerSelectDataId', val)
      this.$store.dispatch('triggerSelectDataName', this.getSelectDataName(val))
    },
    getKeyArrayList (type, id) {
      if (!type) {
        return false
      }
      const params = {}
      type === 'dataset' && (params['datasetId'] = id)
      type === 'widget' && (params['gadgetId'] = id)
      this.$interface.reports.getFieldsListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.observer.issue('updateKeyArray', [])
            return false
          }
          // this.$store.dispatch('getListFieldsRes', res)
          let temp = []
          res.data.forEach(item => {
            temp.push({
              label: item.name,
              value: item.name,
              type: item.type
            })
          })
          store.state.bot.keyArrayList = temp
          this.observer.issue('updateKeyArray', temp)
        }).catch(() => {
          this.observer.issue('updateKeyArray', [])
          this.observer.issue('clearFilterData')
        })
    },
    getSelectDataName (id) {
      try {
        return this.selectData.find(item => item.id === id).name
      } catch (error) {
        return ''
      }
    },

    widgetChanged (item) {
      // clearFifter
      this.$confirm(this.$t('custom.bots.clearFifter'), 'Prompt', {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        this.changeSelect(item)
      }).catch(() => {
      })
    }
  },
  created () {
    this.initThis()
  }
}
</script>

<style lang="scss">
.type_radio_select {
  p {
    font-weight: 400;
    color: #7f7f7f;
    line-height: 20px;
    margin: 0;
    margin-bottom: 10px;
  }
  .el-radio {
    margin-right: 70px;
  }
  .selectCom {
    width: 280px;
  }
  .selectCom {
    display: block;
    margin-top: 4px;
    margin-bottom: 0px;
  }
  .el-cascader {
    line-height: 0;
  }
}
</style>
